<template>
  <div>
    <el-card style="border-radius: 12px">
      <el-form inline style="margin-top: 10px">
        <el-form-item label="会议室号:">
          <el-col>
            <el-input
              style="width: auto"
              placeholder="请输入会议室号"
              clearable
              v-model="roomId"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="会议室名称:">
          <el-input
            style="width: auto"
            placeholder="请输入会议室名"
            clearable
            v-model="roomName"
          ></el-input>
        </el-form-item>
        <el-form-item label="申请人:">
          <el-input
            style="width: auto"
            placeholder="请输入申请人"
            clearable
            v-model="application"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            style="margin-left: 20px"
            type="primary"
            icon="Search"
            @click="getMeetingData()"
          >
            搜索
          </el-button>
          <el-button
            @click="
              ;(roomId = ''),
                (roomName = ''),
                (application = ''),
                getMeetingData()
            "
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <el-table :data="meetingData" border stripe>
        <el-table-column
          width="40px"
          align="center"
          type="index"
          prop="index"
        ></el-table-column>
        <el-table-column
          width="100px"
          align="center"
          label="会议号"
          prop="roomNumber"
        ></el-table-column>
        <el-table-column
          width="100px"
          align="center"
          label="会议室"
          prop="roomName"
        ></el-table-column>
        <el-table-column
          width="100px"
          align="center"
          label="申请人"
          prop="application"
        ></el-table-column>
        <el-table-column
          align="center"
          label="会议主题"
          prop="name"
        ></el-table-column>
        <el-table-column
          align="center"
          label="申请人联系方式"
          prop="userMobile"
        ></el-table-column>
        <el-table-column
          align="center"
          label="开始时间"
          prop="startTime"
        ></el-table-column>
        <el-table-column
          align="center"
          label="结束时间"
          prop="endTime"
        ></el-table-column>
        <el-table-column align="center" label="操作">
          <template #="{ row, $index }">
            <el-tooltip
              effect="dark"
              content="同意"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="success"
                icon="Check"
                circle
                @click="agreeOrRejust(row.id, 1)"
              />
            </el-tooltip>
            <el-tooltip
              effect="dark"
              content="拒绝"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="danger"
                icon="CloseBold"
                circle
                @click="agreeOrRejust(row.id, 0)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        style="margin-top: 10px"
        v-model:current-page="pageNo"
        v-model:page-size="limit"
        :page-sizes="[5, 10, 15, 20]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="prev, pager, next, jumper, -> ,total, sizes"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="getMeetingData"
      />
    </el-card>

    <el-dialog title="请填写拒绝理由" width="50%">
      <el-form ref="rejFormRef" label-width="100px">
        <el-form-item label="拒绝理由" prop="rejectReason">
          <el-input type="textarea" placeholder="请输入拒绝理由"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button>取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { ResponseData, meetingLists, auditMeetings } from '@/api/meeting/type'
import { reqMeetingPageData, reqAuditmeeting } from '@/api/meeting'

// 当前页码
let pageNo = ref<number>(1)
// 定义每页展示数据
let limit = ref<number>(10)
// 定义展示数据的总数
let total = ref<number>(0)

// 搜索框信息
let roomId = ref<string>()
let roomName = ref<string>()
let application = ref<string>()
// 获取未审核的会议信息
let meetingData = ref<meetingLists>([])

// 组件挂载完毕
onMounted(() => {
  getMeetingData()
})
// 更改分页器大小
const handleSizeChange = () => {
  // getRoomData();
}
const getMeetingData = async (page = 1) => {
  pageNo.value = page
  let params = {
    roomName: roomName.value ? roomName.value : '',
    startTime: null,
    endTime: null,
    application: application.value ? application.value : '',
    roomNumber: roomId.value ? roomId.value : '',
    isExaminestate: 2,
    currentPage: pageNo.value,
    pageSize: limit.value,
  }
  let result: any = await reqMeetingPageData(params)
  console.log(result)
  if (result.code == 200) {
    total.value = result.data.total
    meetingData.value = result.data.records
  }
}
let auditMeetingsList = reactive<auditMeetings>([])

const agreeOrRejust = async (id: number, flag: number) => {
  // 申请同意
  let audit = {
    id: id,
    isExaminestate: flag,
  }
  auditMeetingsList.push(audit)
  let result: ResponseData = await reqAuditmeeting(auditMeetingsList)
  if (result.code == 200) {
    ElNotification({
      type: 'success',
      message: '审核成功',
    })
    getMeetingData(
      meetingData.value.length > 1 ? pageNo.value : pageNo.value - 1,
    )
  } else {
    ElNotification({
      type: 'error',
      message: '审核失败',
    })
  }
}
</script>

<style scoped lang="scss"></style>
